import React from 'react';
import Container from '../components/Base/Container';
import styles from './LabelEdit.less';
import { WingBlank, WhiteSpace, Button, Icon, SearchBar  } from 'antd-mobile';
import {connect} from 'dva';

const testLabel=['母乳喂养','腹泻奶粉','二胎','价格敏感','偏好大品牌','周末消费','秃枕','消化不好','黄疸','湿疹','断奶','需要送货','爱囤货']

class LabelItem extends React.Component{

  /*componentWillUnmount(){
    if(this.props.longPress&&this.time){
      this.touchend();
    }
  }

  touchstart=(e)=>{
    if(this.props.longPress){
      this.time=setTimeout(this.props.longPress,1000);
    }
  }

  touchend=()=>{
    if(this.props.longPress&&this.time){
      clearTimeout(this.time);
    }
  }*/

  render(){
    if(this.props.label==this.props.labelEdit){
      return(
        <span className={styles.itemActive}  >
          {this.props.label.slice(0,15)}
          <Icon type="cross" size="sm" onClick={this.props.deleteLabel} className={styles.icon}></Icon>
        </span>
      )
    }
    else if(this.props.labelIn&&this.props.labelIn.length&&this.props.labelIn.includes(this.props.label)){
      return(
        <span className={styles.itemActive} onClick={this.props.toggle} >
          {this.props.label.slice(0,15)}
        </span>
      )
    }
    return(
      <span className={styles.item} onClick={this.props.toggle}  >
          {this.props.label.slice(0,15)}
        </span>
    )
  }
}

class LabelEdit extends React.Component{

  longPress=(labelEdit)=>{
    this.props.dispatch({type:'vip/change', payload:{labelEdit:labelEdit}});
  }

  deleteLabel=(label)=>{
    let newLabel=this.props.vip.label.filter(item=>{
      if(item===label){
        return false;
      }
      return true;
    })
    this.props.dispatch({type:'vip/change', payload:{label:newLabel}});
  }

  toggle=(label)=>{
    let newLabel=[...this.props.vip.label];
    if(newLabel.includes(label)){
      newLabel=newLabel.filter(item=>{
        if(label===item){
          return false;
        }
        return true;
      })
    }
    else{
      newLabel.push(label)
    }
    this.props.dispatch({type:'vip/change', payload:{label:newLabel}});
  }

  keyPress=()=>{
      this.editLabel(this.input);
  }

  submit=()=>{
    this.editLabel(this.input);
    this.props.dispatch({type:'vip/editLabel', payload:{card_id:this.props.location.query.cardId}});
  }

  editLabel=(el)=>{
    let label=[...this.props.vip.label];
    let labelTotal=[...this.props.vip.labelTotal];
    let text=el.value.trim();
    if(!text){
      return
    }
    if(!label.includes(text)){
      label.push(text);
      this.props.dispatch({type:"vip/change", payload:{label}})
    }
    if(!labelTotal.includes(text)){
      labelTotal.push(text);
      this.props.dispatch({type:"vip/change", payload:{labelTotal}})
    }
    el.value='';
  }

  keyDown=(e)=>{
   if(e.which===13|| e.keyCode===13){
     this.editLabel(e.target);
    }
  }

  render(){
    let {label, labelEdit, labelTotal}=this.props.vip;
    return(
      <Container
        title="修改标签"
      >
        <div className={styles.bgWhite}>

          <div className={styles.vipLabel}>
            <div className={styles.title}>会员标签</div>
            <WhiteSpace/>

            <div>

              {
                !!label.length&&
                label.map((item, index)=>{
                  if(!item){
                    return null;
                  }
                  return(
                    <LabelItem key={index} label={item} labelEdit={labelEdit} toggle={this.longPress.bind(this, item)} deleteLabel={this.deleteLabel.bind(this,item)} />
                  )
                })
              }

              <input className={styles.itemEdit} onKeyDown={this.keyDown} ref={el=>{this.input=el}} placeholder="自定义" />

            </div>
          </div>

           <WhiteSpace/>
          <div onClick={this.submit} className={styles.btn} >保存</div>
          <WhiteSpace/>

          {/*<div className={styles.whiteSpace}></div>*/}


          {/*<div className={styles.custom}>
            <WhiteSpace />
            <div className={styles.title}>添加自定义标签</div>
            <WhiteSpace />
            <div className={styles.input}>
              <input type="search" placeholder="请输入自定义标签" className={styles.itemEdit} ref={el=>{this.input=el}} />
              <div className={styles.add} onClick={this.keyPress}>添加</div>
            </div>
          </div>*/}

          {/*<hr className={styles.hr} />*/}

          <div className={styles.offent}>
            <div className={styles.title}>添加常用标签</div>
            <WhiteSpace />

            <div className={styles.all}>
              {/*{
                !!labelTotal.length&&
                labelTotal.map((item, index)=>{
                  if(item.length){
                    return(
                      <LabelItem key={index} label={item} labelIn={label} toggle={this.toggle.bind(this,item)} />
                    )
                  }

                })
              }*/}

              {
                testLabel.map((item, index)=>{
                  return(
                    <LabelItem key={index} label={item} labelIn={label} toggle={this.toggle.bind(this,item)} />
                  )
                })
              }
            </div>
          </div>


        </div>

      </Container>

    )
  }
}

export default connect(({vip})=>({vip}))(LabelEdit);
